<template>
  <div id="login" class="flex-x-y-center">
    <div class="flex-x-y-center">
      <div class="center">
        <div class="left flex-x-y-center">
          <div class="login_info"></div>
        </div>
        <div class="right">
          <div class="logo"></div>
          <p>Welcome back, please login to your account.</p>
          <div class="username">
            <div class="title">Username</div>
            <el-input
              placeholder="Username"
              prefix-icon="el-icon-user"
              v-model="username"
            >
            </el-input>
          </div>
          <div class="password">
            <div class="title">Password</div>
            <el-input
              placeholder="Password"
              prefix-icon="el-icon-goods"
              v-model="password"
              ref="password"
            >
            </el-input>
          </div>
          <p>
            First time use or change password , please
            <span @click="forgetPassword" class="goto">Forgot password</span>
          </p>
          <el-button @click="loginUser()">Log in</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { login } from "@/api/api";
export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      username: "",
      password: "",
    };
  },
  created(){
    localStorage.removeItem("token");
    this.$store.commit("food/setUserObj", null)
  },
  methods: {
    forgetPassword() {
      this.$message({
        dangerouslyUseHTMLString: true,
        message:"用户名是英文，首字母大写。<br/>默认密码是123456。<br/>如果想修改请联系管理员Zalen。",
        type:"info"
      });
    },
    loginUser() {
      if(this.username == ""){
        this.$message("用户名不能为空")
        return;
      }
      if(this.password == ""){
        this.$refs.password.focus()
        this.$message("密码不能为空")
        return;
      }
      login({ username: this.username, password: this.password }).then(
        (res) => {
          if (res.code === 200) {
            let token = res.data.token;
            if (token) {
              localStorage.setItem("token", token);
              this.$store.commit("food/setToken", token);
              // this.$store.dispatch("logout");
              console.log("token", this.$store.state.food.token);
              this.$message({
                message:"登录成功，正在跳转...",
                type:"success"
              });
              console.log('tag', this.$route.query.redirect)
              let topath = "";
              if(!this.$route.query.redirect){
                topath = "/vesync/food"
              }
              else{
                if(this.$route.query.redirect.includes("/login")){
                  topath = "/vesync/food"
                }
                else{
                  topath = this.$route.query.redirect
                }
              }
              this.$router.push(topath);
              console.log("tag", 123);
            } else {
              this.$message("用户密码错误");
            }
          }
        }
      );
    },
  },
};
</script>

<style lang="stylus" scoped>
#login {
  width: 100%;
  height: 100%;
  background-image: url('../../assets/login_bg.svg');

  >div {
    width 70%;
    min-width 700px
    height: 100%;
  }

  .goto {
    border-bottom: 1px solid #0067b9;
    padding: 0 5px 1px 5px;
    color: #0067b9;
    cursor: pointer;
  }

  .center {
    width: 100%;
    height: 500px;
    display: flex;

    .left {
      flex: 1;
      background: #ecf3fb;

      .login_info {
        background-size: 100% 300px;
        background-image: url('../../assets/login_info.svg');
        width: 100%;
        height: 300px;
      }
    }

    .right {
      flex-direction: column;
      flex: 1;
      background: #fff;
      border-radius: 0 8px 8px 0;
      padding: 30px;
      text-align: left;

      .logo {
        background-size: 125px 50px;
        background-image: url('/logoBig.png');
        width: 125px;
        height: 50px;
        margin-bottom: 20px;
      }

      .title {
        margin-bottom: 8px;
        color: rgb(150, 151, 153);
        margin-top: 12px;
        font-size: 12px;
      }

      .password {
        margin-bottom: 10px;
      }

      p {
        color: #262626;
        margin-bottom: 20px;
        font-size: 14px;
      }

      .el-button {
        background: #0067b9;
        border-color: #0067b9;
        color: #fff;
        width: 100%;
      }
    }
  }
}
</style>